import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义数据
  state: {
    cart: [
      {
        name: '手机',
        price: "1000",
        count: 1,
      },
      {
        name: '电脑',
        price: "2000",
        count: 1,
      },
      {
        name: '键盘',
        price: "200",
        count: 2,
      }
    ]

  },
  //对store中已有的数据进行加工处理
  getters: {
    totalPrice(state) {
      return state.cart.reduce((pre, item) => pre + item.price * item.count, 0)
    }
  },
  //用于变更store中的数据
  mutations: {
    increment(state, index) {
      if (state.cart[index].count >= 1) {
        state.cart[index].count++;
      }
    },
    decrement(state, index) {
      if (state.cart[index].count > 1) {
        state.cart[index].count--;
      }
    },
    //增加新的商品
    addItem(state, newItem) {
      state.cart.push(newItem);
    },
    deleteItem(state, index) {
      state.cart.splice(index, 1);
    }
  },
  //用于处理异步任务，但还是需要通过触发mutation的方式间接变更数据
  actions: {
    incrementAsync(state, index) {
      setTimeout(() => {
        state.commit('increment', index)
      }, 1000);
    },
    decrementAsync(state, index) {
      setTimeout(() => {
        state.commit('decrement', index)
      }, 1000);
    },
    addNewItem({ commit }, newItem) {
      commit('addItem', newItem);
    }
  },
  modules: {

  }
})
